<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改头像</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
        }

        #center-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            height: 100%;
        }

        #center-container button {
            margin-top: 10px;
        }
    </style>
</head>
<script>
    function uploadImage(event) {
        var input = event.target;
        var file = input.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var image = document.getElementById('image');
                image.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    }

    function updateImage() {
        if (confirm("确定要修改头像吗？")) {
            console.log($("#image"));
            var file = $("#uploadImage")[0].files[0];
            if (file) {
                var formData = new FormData();
                formData.append('image', file);

                $.ajax({
                    url: "user/updateImage",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        // 处理服务器返回的数据
                        var msg = data;
                        alert(data);
                    },
                    error: function (xhr, status, error) {
                        // 处理错误
                        console.log(error);
                    }
                });
            }
            alert("已上传")
        }
    }
</script>
<body>
<div id="center-container">
    <input type="file" id="uploadImage" accept="image/*" onchange="uploadImage(event)">
    <img id="image" name="image" src="#"  style="width: 800px; height: 500px">
    <button type="submit" onclick="updateImage()">上传头像</button>
</div>

</body>
</html>